<template>
  <!-- 移动端导航 -->
  <MobileNav
    v-if="isMobile"
    :icon="icon"
    :team-name="myteam?.name || '码客行'"
    :user="getuser"
    :is-admin="!!isAdmin"
    :nav-permissions="[]"
    :user-menu-permissions="[]"
    :router-names="routerNames"
    :update="update"
    :team-list="filteredTeams"
    :current-team="myteam"
    @user-action="handleUserSettings"
    @management="goToMgmt"
    @team-change="changeTeam"
  />

  <!-- PC端导航 -->
  <div v-else class="pc-nav desktop-show">
    <el-header height="64px" id="nav">
      <div class="container-xxl p-0">
        <div class="navbar navbar-expand-lg">
          <div class="navbar-brand" style="font-size: 0px" href="/">
            <img :src="icon" height="40" />
          </div>

          <el-button
            type="primary"
            size="default"
            class="navbar-toggler"
            link
            :style="{ marginRight: '20px' }"
            @click="
              collapse.display === 'block'
                ? (collapse.display = 'none')
                : (collapse.display = 'block')
            "
          >
            <el-icon size="default">
              <Menu v-if="!collapse.display" />
              <CloseBold v-else />
            </el-icon>
          </el-button>

          <div
            class="collapse navbar-collapse"
            :style="collapse"
            id="navbarSupportedContent"
          >
            <ul class="navbar-nav" :style="{ margin: '0 auto' }">
              <router-link
                :to="{ path: '/home' }"
                custom
                v-slot="{ navigate, isActive }"
              >
                <li
                  class="nav-item"
                  :class="isActive ? 'active' : ''"
                  @click="navigate"
                >
                  <el-icon>
                    <HomeFilled />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;首页</span>
                </li>
              </router-link>
              <router-link
                :to="routers.question"
                custom
                v-slot="{ navigate, isActive }"
              >
                <li
                  class="nav-item"
                  :class="isActive ? 'active' : ''"
                  @click="navigate"
                >
                  <el-icon>
                    <Grid />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;题库</span>
                </li>
              </router-link>
              <router-link
                :to="routers.questionbank"
                custom
                v-slot="{ navigate, isActive }"
              >
                <li
                  class="nav-item"
                  :class="isActive ? 'active' : ''"
                  @click="navigate"
                >
                  <el-icon>
                    <List />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;专题</span>
                </li>
              </router-link>
              <router-link
                :to="routers.task"
                custom
                v-slot="{ navigate, isActive }"
              >
                <li
                  class="nav-item"
                  :class="isActive ? 'active' : ''"
                  @click="navigate"
                >
                  <el-icon>
                    <Checked />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;任务</span>
                </li>
              </router-link>
              <router-link
                :to="routers.activity"
                custom
                v-slot="{ navigate, isActive }"
              >
                <li
                  class="nav-item"
                  :class="isActive ? 'active' : ''"
                  @click="navigate"
                >
                  <!-- <el-icon>
                    <TrophyBase />
                  </el-icon> -->
                  <el-icon>
                    <Flag />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;比赛</span>
                </li>
              </router-link>
              <router-link
                v-if="isAdmin || routerNames.find((e) => e === '评测')"
                :to="routers.assessment"
                custom
                v-slot="{ navigate, isActive }"
              >
                <li
                  class="nav-item"
                  :class="isActive ? 'active' : ''"
                  @click="navigate"
                >
                  <el-icon>
                    <TrendCharts />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;评测</span>
                </li>
              </router-link>
              <!-- saas云课堂 -->
              <!-- <li class="nav-item" v-if="!update && !isHGKJteam" @click="goToYkt">
                <el-icon>
                  <Platform />
                </el-icon>
                <span class="nav-item-title">&nbsp;云课堂</span>
              </li> -->
              <router-link
                v-if="!update"
                :to="routers.cloudClass"
                custom
                v-slot="{ navigate, isActive }"
              >
                <li
                  class="nav-item"
                  :class="isActive ? 'active' : ''"
                  @click="navigate"
                >
                  <el-icon>
                    <Platform />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;云课堂</span>
                </li>
              </router-link>
              <!-- 管理 -->
              <!-- <li class="nav-item" v-if="getuser?.isAdmin" @click="goToMgmt">
                <el-icon>
                  <Management />
                </el-icon>
                <span class="nav-item-title">&nbsp;管理</span>
              </li> -->

              <router-link
                :to="{ name: '科学中心' }"
                custom
                v-slot="{ navigate }"
                v-if="update"
              >
                <li class="nav-item" @click="navigate">&nbsp;大数据</li>
              </router-link>
            </ul>

            <div class="d-flex margin-left20">
              <div class="navbar-nav mr-auto margin-left20">
                <!-- 个人中心 -->
                <div class="nav-item">
                  <el-dropdown @command="handleCommand" trigger="hover">
                    <div class="avater-h nav-item-title">
                      <el-avatar
                        :src="circleUrl"
                        style="transform: translateY(7px)"
                        size="small"
                      ></el-avatar>
                      <span class="avater-name hov" v-text="myName"></span>
                    </div>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="u"
                          >个人中心</el-dropdown-item
                        >
                        <el-dropdown-item command="a"
                          >管理我的题目</el-dropdown-item
                        >
                        <el-dropdown-item class="tmp111" command="d" divided
                          >修改个人信息</el-dropdown-item
                        >
                        <el-dropdown-item command="b">退出</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
                <!-- 团队 -->
                <div class="">
                  <el-dropdown
                    trigger="hover"
                    :hide-on-click="false"
                    ref="dropShow"
                    @visible-change="handleDropdownVisibleChange"
                    :max-height="400"
                  >
                    <div class="hov nav-item" style="padding: 0">
                      <i class="iconfont">&#xe600;</i>
                      <span class="avater-name hov">团队</span>
                      <el-text
                        class="hov"
                        style="
                          text-align: left;
                          width: 150px;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                        "
                        truncated
                        >:{{ myteam.name || "暂未选择团队" }}</el-text
                      >
                    </div>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item v-if="isAdmin">
                          <el-text
                            type=""
                            size="large"
                            class="goToMgmt cu"
                            v-if="isAdmin"
                            @click="goToMgmt"
                          >
                            <!-- <el-icon class="icon-text">
                                <Management />
                              </el-icon> -->
                            当前团队管理后台
                          </el-text>
                          <div
                            v-if="isAdmin"
                            class="position-absolute"
                            :style="{ right: '12px' }"
                          >
                            <i
                              class="icon icon-ic_fluent_arrow_circle_right_24_filled"
                              :style="{ color: 'var(--color-cheng)' }"
                            ></i>
                          </div>
                        </el-dropdown-item>
                        <el-dropdown-item divided>
                          <el-input
                            v-model="searchQuery"
                            placeholder="请输入团队名称"
                            @input="filterTeams"
                            clearable
                            @focus="onFocus"
                            @blur="onBlur"
                            @compositionstart="onCompositionStart"
                            @compositionend="onCompositionEnd"
                          ></el-input>
                        </el-dropdown-item>
                        <el-dropdown-item
                          divided
                          v-for="(v, k) in filteredTeams"
                          :key="'team_' + k"
                          class="position-relative"
                          :command="k"
                        >
                          <!-- size="large" -->
                          <el-text v-if="v.ID === myteam.ID" type="primary">{{
                            v.name
                          }}</el-text>
                          <span v-else @click="changeTeam(v.ID)">{{
                            v.name
                          }}</span>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-header>
  </div>

  <!-- 响应式对话框 - 与ojSass保持一致 -->
  <el-dialog
    v-model="dialogVisible"
    :width="dialogWidth"
    class="responsive-dialog"
  >
    <template #header>
      <span class="icon-text el-dialog__header-title">
        <el-icon class="text-primary">
          <Guide />
        </el-icon>
        {{ name }}
      </span>
    </template>
    <div class="row justify-content-md-center text-login">
      <div class="col">
        <!-- <h4 v-text="name" :class="name == '登录' ? 'text-center' : ''"></h4> -->
      </div>
    </div>
    <div id="navel-dialog" class="row justify-content-md-center text-body">
      <!-- 登录表单 - 使用ojSass的结构 -->
      <div class="col" v-show="name == '登录'">
        <el-form
          ref="formref"
          :model="form"
          label-width="95px"
          size="default"
          label-position="left"
        >
          <el-form-item class="text-item text-center" label-width="0">
            <img
              style="transform: translateX(10px)"
              width="80"
              class="headimage"
              src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg"
            />
          </el-form-item>
          <el-form-item label="团队ID">
            <el-input
              placeholder="团队ID"
              name="teamid"
              v-model="form.teamid"
            ></el-input>
          </el-form-item>
          <el-form-item class="text-item" label="账号/手机号">
            <el-input
              placeholder="账号/手机号"
              name="phonenum"
              v-model="form.phonenum"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              placeholder="密码"
              name="password"
              type="password"
              v-model="form.password"
            ></el-input>
          </el-form-item>
          <div class="text-right pu" @click="name = '忘记密码'">
            找回/修改密码
          </div>
          <el-form-item label-width="0">
            <div class="row m-0 p-0">
              <div class="col">
                <button
                  class="btn d-block btn-login"
                  type="button"
                  @click="login"
                >
                  登录
                </button>
              </div>
              <div class="col">
                <button
                  class="btn d-block btn-login"
                  type="button"
                  @click="name = '注册'"
                >
                  用户注册
                </button>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <!-- 忘记密码表单 -->
      <div class="col" v-show="name == '忘记密码'">
        <el-form
          ref="forgetref"
          :model="forget"
          label-width="95px"
          size="default"
          label-position="left"
        >
          <el-form-item class="text-item text-center" label-width="0">
            <img
              style="transform: translateX(10px)"
              width="80"
              class="headimage"
              src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg"
            />
          </el-form-item>
          <el-form-item class="text-item" label="手机号：" prop="phonenum">
            <el-input
              placeholder="请输入手机号"
              name="phonenum"
              v-model="forget.phonenum"
            ></el-input>
          </el-form-item>
          <el-form-item class="text-item" label="验证码：" prop="yzm">
            <div class="row m-0">
              <div class="col p-0">
                <el-input
                  placeholder="四位验证码"
                  v-model="forget.yzm"
                ></el-input>
              </div>
              <div class="col pr-0">
                <button
                  style="height: 30px; border: 0px"
                  class="d-block btn-login border-light"
                  @click.stop.prevent="forgetSendCode"
                  :disabled="time2 !== 60"
                  v-text="time2 == 60 ? '验证码' : time2"
                ></button>
              </div>
            </div>
          </el-form-item>
          <el-form-item class="text-item" label="新密码：" prop="password">
            <el-input
              placeholder="请输入新密码"
              name="newpassword"
              type="password"
              v-model="forget.password"
            ></el-input>
          </el-form-item>
          <el-form-item class="text-item" label-width="0">
            <div class="row m-0 p-0">
              <div class="col p-0 text-right">
                <button
                  class="btn btn-login d-block"
                  type="button"
                  @click="forgetpassword"
                >
                  修改密码
                </button>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <!-- 注册表单 -->
      <div class="col" v-show="name == '注册'">
        <el-form
          ref="registerref"
          :rules="registerrole"
          :model="register"
          label-width="95px"
          size="default"
          label-position="left"
        >
          <el-form-item
            class="text-item cu"
            @click="innerVisible = true"
            label-width="0"
          >
            <img :src="register.headportrait" class="headimage" width="80" />
            &nbsp;&nbsp;&nbsp;点击图片修改头像
          </el-form-item>
          <el-form-item class="text-item" label="手机号：" prop="phonenum">
            <el-input
              placeholder="请输入手机号"
              name="phonenum"
              v-model="register.phonenum"
            ></el-input>
          </el-form-item>
          <el-form-item class="text-item" label="验证码：" prop="yzm">
            <div class="row m-0">
              <div class="col p-0">
                <el-input
                  placeholder="请输入验证码"
                  v-model="register.yzm"
                ></el-input>
              </div>
              <div class="col pr-0">
                <button
                  style="height: 30px; border: 0px"
                  class="d-block btn-login border-light"
                  @click.stop.prevent="registerSendCode"
                  :disabled="time !== 60"
                  v-text="time == 60 ? '验证码' : time"
                ></button>
              </div>
            </div>
          </el-form-item>
          <el-form-item class="text-item" label="密码：" prop="password">
            <el-input
              type="password"
              name="password"
              placeholder="请输入密码"
              v-model="register.password"
            ></el-input>
          </el-form-item>

          <el-form-item class="text-item">
            <el-input
              placeholder="请输入用户名"
              aria-label="用户名："
              name="name"
              v-model="register.name"
            ></el-input>
          </el-form-item>
          <el-form-item class="text-item" label-width="0">
            <div class="row m-0 p-0">
              <div class="col p-0">
                <button
                  class="btn btn-login d-block"
                  type="button"
                  @click="registersubmit"
                >
                  注册
                </button>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <!-- 修改个人信息表单 - PC端现代化，移动端极简 -->
      <div
        class="col"
        :style="{ marginTop: '0px' }"
        v-show="name == '修改个人信息'"
      >
        <el-form
          class="info-form"
          ref="registerref"
          :model="userInfoForm"
          label-width="80px"
          size="default"
          label-position="left"
        >
          <!-- PC端现代化样式 -->
          <div class="pc-info-form">
            <div class="modern-section">
              <div class="section-header">
                <el-icon class="section-icon">
                  <User />
                </el-icon>
                <span class="section-title">个人信息</span>
              </div>

              <div class="avatar-container" @click="innerVisible = true">
                <el-avatar
                  :src="
                    userInfoForm.headportrait
                      ? userInfoForm.headportrait
                      : getuser
                      ? getuser.headportrait
                      : 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg'
                  "
                  :size="70"
                  class="modern-avatar"
                ></el-avatar>
                <div class="avatar-overlay">
                  <span>更换头像</span>
                </div>
              </div>

              <el-form-item class="modern-form-item" label="用户名" prop="name">
                <el-input
                  type="text"
                  placeholder="请输入用户名"
                  v-model.trim="userInfoForm.name"
                  class="modern-input"
                ></el-input>
              </el-form-item>

              <el-button
                class="modern-action-btn primary"
                type="primary"
                @click="changeUser"
              >
                保存个人信息
              </el-button>
            </div>

            <div class="modern-section">
              <div class="section-header">
                <el-icon class="section-icon">
                  <Lock />
                </el-icon>
                <span class="section-title">修改密码</span>
              </div>

              <el-form-item
                class="modern-form-item"
                label="原密码"
                prop="password"
              >
                <el-input
                  type="password"
                  show-password
                  placeholder="请输入原密码"
                  v-model="userInfoForm.password"
                  class="modern-input"
                >
                  <template #prefix>
                    <el-icon>
                      <Lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item
                class="modern-form-item"
                label="新密码"
                prop="password1"
              >
                <el-input
                  type="password"
                  show-password
                  placeholder="请输入新密码"
                  v-model="userInfoForm.password1"
                  class="modern-input"
                >
                  <template #prefix>
                    <el-icon>
                      <Lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-button
                class="modern-action-btn secondary"
                type="primary"
                @click="changepassword"
              >
                修改密码
              </el-button>
            </div>
          </div>

          <!-- 移动端极简样式 -->
          <div class="mobile-info-form">
            <div class="simple-card">
              <div class="simple-header">
                <el-icon>
                  <User />
                </el-icon>
                <span>个人信息</span>
              </div>

              <div class="simple-avatar" @click="innerVisible = true">
                <el-avatar
                  :src="
                    userInfoForm.headportrait
                      ? userInfoForm.headportrait
                      : getuser
                      ? getuser.headportrait
                      : 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg'
                  "
                  :size="50"
                ></el-avatar>
                <span class="avatar-text">点击更换头像</span>
              </div>

              <div class="simple-field">
                <label>用户名</label>
                <el-input
                  v-model.trim="userInfoForm.name"
                  placeholder="请输入用户名"
                  size="default"
                ></el-input>
              </div>

              <el-button
                class="simple-button primary"
                @click="changeUser"
                size="default"
                >保存信息</el-button
              >
            </div>

            <div class="simple-card">
              <div class="simple-header">
                <el-icon>
                  <Lock />
                </el-icon>
                <span>修改密码</span>
              </div>

              <div class="simple-field">
                <label>原密码</label>
                <el-input
                  v-model="userInfoForm.password"
                  type="password"
                  show-password
                  placeholder="请输入原密码"
                  size="default"
                ></el-input>
              </div>

              <div class="simple-field">
                <label>新密码</label>
                <el-input
                  v-model="userInfoForm.password1"
                  type="password"
                  show-password
                  placeholder="请输入新密码"
                  size="default"
                ></el-input>
              </div>

              <el-button
                class="simple-button secondary"
                @click="changepassword"
                size="default"
                >修改密码</el-button
              >
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </el-dialog>

  <!-- 头像选择对话框 -->
  <el-dialog
    v-model="innerVisible"
    :width="avatarDialogWidth"
    class="avatar-dialog responsive-dialog"
  >
    <template #header>
      <span class="icon-text el-dialog__header-title">
        <el-icon class="text-primary">
          <Guide />
        </el-icon>
        选择头像
      </span>
    </template>
    <div class="avatar-grid">
      <div
        v-for="im in headimage"
        :key="im"
        class="avatar-item"
        @click="selectAvatar(im)"
      >
        <img :src="im" class="avatar-option" alt="头像选项" />
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { CloseBold, Guide, Lock, Menu, User } from "@element-plus/icons-vue";
import { ElDropdown, ElForm, ElMessage, ElMessageBox } from "element-plus";
import {
  computed,
  inject,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
} from "vue";
import { useStore } from "vuex";
import {
  asyncChangeonlineteamid,
  asyncchangepassword,
  asyncchangeuser,
  asynccreateteam,
  asyncgetregistphoneVerificationCode,
  asynclogin,
  asynclogout,
  asyncresetpassword,
  asyncselectteams,
  asyncuserregist,
  selecteamtteams,
  selectteamrole,
} from "../api";
import { Storekey } from "../interface";
import Studycodemodel from "../mysql_interface/studycodemodel";
import headimage from "../ojSass/data/headimage";
// 保持原有的路由导入逻辑
import { useRouter } from "vue-router";
import * as routers from "../ojSass/data/router";
import { isPhonenum } from "../util/RegExp";
import MobileNav from "./components/MobileNav.vue";

// 移动端状态
const isMobile = ref(false);
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768;
};

// 移动端用户设置处理函数
const handleUserSettings = (command: string) => {
  handleCommand(command);
};

// 响应式对话框宽度
const dialogWidth = computed(() => {
  if (isMobile.value) {
    return "90%";
  } else {
    return "550px";
  }
});

// 头像对话框响应式宽度
const avatarDialogWidth = computed(() => {
  if (isMobile.value) {
    return "80%";
  } else {
    return "500px";
  }
});

// 选择头像的处理函数
const selectAvatar = (avatar: string) => {
  register.headportrait = avatar;
  userInfoForm.headportrait = avatar;
  innerVisible.value = false;
};

const dialogVisible = ref(false);
const dialogVisibleteam = ref(false);
const collapse = reactive<Record<string, any>>({});
const time = ref(60);
const time2 = ref(60);
const props = defineProps<{
  icon: string;
  myteam: Studycodemodel.Iteam;
  update?: boolean;
  href?: string;
}>();

// 码客行
const tenant_id = inject<string | undefined>("tenant_id", undefined);

const dropdownref = ref();

const userInfoForm = reactive({
  name: "",
  password: "",
  password2: "",
  password1: "",
  headportrait: "",
  phonenum: "",
});
const form = reactive({
  teamid: "",
  password: "",
  phonenum: "",
});
const register = reactive({
  phonenum: "",
  password: "",
  yzm: "",
  headportrait: headimage[9],
  name: "",
});
const forget = reactive({
  phonenum: "",
  password: "",
  yzm: "",
});
const name = ref("登录");

const registerrole = {
  phonenum: [
    {
      message: "手机号不合法",
      regexp: isPhonenum,
      trigger: "blur",
    },
  ],
  password: [
    {
      min: 4,
      max: 25,
      message: "长度在 3 到 25 个字符",
      trigger: "blur",
    },
  ],
  yzm: [{ required: true, message: "请输入验证码", trigger: "blur" }],
};
const innerVisible = ref(false);

const router = useRouter();
const store = useStore(Storekey);
const getuser = computed(() => {
  return store.state.user;
});
const teamid = computed(() => {
  return getuser?.value?.teamid;
});
const getteam = computed(() => {
  return store.state.team?.rows || [];
});
const isAdmin = computed(() => {
  return getuser.value?.isAdmin;
});
const myName = computed(() => {
  if ((getuser?.value?.name?.length || 0) > 5) {
    return getuser?.value?.name?.substring(0, 5) + "...";
  }
  return getuser?.value?.name;
});
const circleUrl = computed(() => {
  if (getuser.value) return getuser.value.headportrait;
  return "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
});

// 登录管理后台
function goToMgmt() {
  const { origin } = window.location;
  window.open(`${origin}/acCoderSaasMgmt`);
}
// isHGKJteam

// 获取权限
const roleName = "学生";
const routerNames = ref<any[]>([]);
async function getPermissionsCfg() {
  const { rows } = await selectteamrole({
    teamid: getuser.value?.teamid,
    name: roleName,
  });
  // 可能存在多条
  routerNames.value = rows[0]?.routername || [];
}
async function init() {
  // user 没有值的时候不需要处理
  if (!getuser.value) return;
  await getTeamList();
  const _myteam = localStorage.getItem("my-team");
  const myTeam = _myteam ? JSON.parse(_myteam) : {};
  const firstTeamId = teamList.value[0]?.ID;
  let changeId = firstTeamId;
  // myTeam.ID 有值 或者与firstTeamId 相等  则不需要修改否则默认第一个
  if (
    !myTeam.ID ||
    myTeam.ID === firstTeamId ||
    !teamList.value.find((e) => e.ID === myTeam.ID)
  ) {
    changeId = firstTeamId;
  } else {
    changeId = myTeam.ID;
  }
  if (changeId) {
    changeTeam(changeId);
  }
}

onMounted(async () => {
  checkMobile();
  window.addEventListener("resize", checkMobile);
  init();
});

onUnmounted(() => {
  window.removeEventListener("resize", checkMobile);
});

// 团队列表
// 用于搜索的输入框值
const searchQuery = ref();
const teamList = ref<Studycodemodel.Iteam[]>([]);
// 用于存储筛选后的团队数据
const filteredTeams = ref<Studycodemodel.Iteam[]>([]);
async function getTeamList() {
  // 销售助教特殊处理 刷新之后store就清空了
  // TODO  /v1/user/selectteams 在online之前调用了
  if (getuser.value?.remarks === "销售助教") {
    // asyncselectteams 则是所有团队
    const { rows } = await asyncselectteams({ tenant_id });
    teamList.value = rows;
  } else {
    const { rows } = await selecteamtteams({ tenant_id });
    teamList.value = rows;
  }
  filteredTeams.value = teamList.value;
}
async function changeTeam(id: number | undefined) {
  try {
    // 通知服务器修改 changeonlineteamid
    await asyncChangeonlineteamid({ teamid: id });
    // 修改store中user 的teamid改变
    store.dispatch("actiononline");
    setTimeout(() => {
      if (dropShow.value) {
        dropShow.value.handleClose();
      } else {
        console.log("dropShow is not a valid instance");
      }
    }, 200);
  } catch (error) {
    console.error("asyncChangeonlineteamid error=>", error);
  }
}
// 根据输入框内容进行筛选
function filterTeams() {
  if (searchQuery.value) {
    filteredTeams.value = teamList.value.filter((team) =>
      team?.name?.toLowerCase().includes(searchQuery.value.toLowerCase())
    );
  } else {
    filteredTeams.value = teamList.value;
  }
}
// 获取dropdown的引用  提取出 ElDropdown 类实例的类型
const dropShow = ref<InstanceType<typeof ElDropdown>>();
// 中文输入状态
let isComposing = false;
// 监听 dropdown 的显示/隐藏
function handleDropdownVisibleChange(visible: boolean) {
  if (!visible) {
    searchQuery.value = "";
  } else {
    // 将当前的团队排列在 filteredTeams 第一个
    const currentTeam = teamList.value.find((team) => team.ID === teamid.value);
    if (currentTeam) {
      filteredTeams.value = [
        currentTeam,
        ...teamList.value.filter((team) => team.ID !== currentTeam.ID),
      ];
    }
  }
}
// 处理中文输入开始时的事件
function onCompositionStart() {
  isComposing = true;
}
// 处理中文输入结束时的事件
function onCompositionEnd() {
  // isComposing = true;
}
// 输入框聚焦时
function onFocus() {
  if (dropShow.value) {
    dropShow.value.handleOpen();
  }
}
// 处理失去焦点时的逻辑
function onBlur() {
  if (!isComposing) {
    if (dropShow.value) {
      dropShow.value.handleClose();
    }
  }
}

async function handleCommand(co: string) {
  switch (co) {
    case "a":
      router.push({ name: "题库", query: { tabName: "user" } });
      break;
    case "b":
      await asynclogout();
      // 清除团队缓存
      localStorage.removeItem("my-team");
      router.push({ name: "登录" });
      await store.dispatch("actiononline");
      break;
    case "c":
      router.push({
        name: "贡献测试点查询",
      });
      break;
    case "u":
      router.push({ name: "用户" });
      break;
    case "d":
      console.log("修改个人信息");
      dialogVisible.value = true;
      name.value = "修改个人信息";
      break;
    default:
  }
}

function shoudialogVisible(name1: string) {
  dialogVisible.value = true;
  if (name1) {
    name.value = name1;
  }
}

async function login() {
  const { phonenum, password, teamid } = form;
  try {
    await asynclogin({ ID: phonenum, password, teamid });
    location.reload();
    await store.dispatch("actiononline");
    dialogVisible.value = false;
    ElMessage.success("登录成功");
  } catch (e: any) {
    ElMessage.error(String(e));
  }
}

async function registerSendCode() {
  const { phonenum } = register;
  if (time.value !== 60) return;
  if (isPhonenum.test(phonenum)) {
    await asyncgetregistphoneVerificationCode(phonenum);
    const x = setInterval(() => {
      time.value = time.value - 1;
      if (time.value == 0) {
        clearInterval(x);
        time.value = 60;
      }
    }, 1000);
  }
}
async function forgetSendCode() {
  const { phonenum } = forget;
  if (time2.value !== 60) return;
  if (isPhonenum.test(phonenum)) {
    await asyncgetregistphoneVerificationCode(phonenum);
    const x = setInterval(() => {
      time2.value = time2.value - 1;
      if (time2.value == 0) {
        clearInterval(x);
        time2.value = 60;
      }
    }, 1000);
  }
}
async function changepassword() {
  try {
    await asyncchangepassword(userInfoForm);
    ElMessage.success("修改密码成功");
    dialogVisible.value = false;
  } catch (e: any) {
    ElMessage.error(e);
  }
}
async function changeUser() {
  try {
    await asyncchangeuser(userInfoForm);
    ElMessage.success("修改个人信息成功");
    await store.dispatch("actiononline");
    dialogVisible.value = false;
  } catch (e: any) {
    ElMessage.error(e);
  }
}

const forgetref = ref<typeof ElForm>();
async function forgetpassword() {
  forgetref.value?.validate(async (valid: any) => {
    if (valid) {
      try {
        await asyncresetpassword(forget);
        ElMessage.success("修改个人信息成功");
        await asynclogin({
          ID: forget.phonenum,
          password: forget.password,
        });
        await store.dispatch("actiononline");
        dialogVisible.value = false;
      } catch (e: any) {
        ElMessage.error(e);
      }
    } else {
      return false;
    }
  });
}

function handleCommand2(co: string) {
  dropdownref.value?.handleClose();
  switch (co) {
    case "a":
      if (!getuser.value) {
        shoudialogVisible("登录");
      } else {
        if (
          getteam.value.filter((v) => v.userid === getuser.value?.ID).length > 4
        ) {
          ElMessage.warning("创建团队数上限为5");
          return;
        }

        ElMessageBox.prompt("请输入名称", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(({ value }) => {
          if (value) {
            asynccreateteam({ name: value })
              .then((e) => {
                if (e.ID) {
                  router.push({
                    name: "团队",
                    params: {
                      ID: e.ID,
                    },
                  });
                }
              })
              .catch((e) => {
                ElMessage.error(e);
              });
          }
        });
      }
      break;
    case "b":
      dialogVisibleteam.value = true;
      break;
    default:
      return;
  }
}

const registerref = ref();

async function registersubmit() {
  registerref.value.validate(async (valid: any) => {
    if (valid) {
      try {
        await asyncuserregist(register);
        ElMessage.success("注册成功");
        await store.dispatch("actiononline");
        dialogVisible.value = false;
        location.reload();
      } catch (e: any) {
        ElMessage.error(e);
      }
    } else {
      return false;
    }
  });
}

// 监听团队切换
watch(
  () => getuser.value,
  (e) => {
    if (e) {
      userInfoForm.name = e.name ? e.name : "";
      getPermissionsCfg();
    }
  }
);
// 监听用户切换
watch(
  () => getuser.value?.ID,
  (e) => {
    if (e) {
      init();
    }
  }
);

defineExpose({
  shoudialogVisible,
  handleCommand,
  handleCommand2,
});
</script>

<style scoped>
/* 响应式控制 */
@media (max-width: 768px) {
  .pc-nav {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .mobile-nav {
    display: none !important;
  }
}

/* ojSass */
#nav {
  background-color: #fff;
  left: 0px;
  top: 0px;
  margin: 0 auto;
  width: 100%;
  z-index: 10;
  box-shadow: 0px 3px 6px rgba(114, 114, 114, 0.16);
}

/*ojSass 头像 */
.hov:hover {
  color: #3b5fdd;
}

/* ojSass */
#nav .active {
  color: #3b5fdd;
  border-bottom: 4px solid #3b5fdd;
}

/* ojSass */
.nav-item {
  border-bottom: 4px solid transparent;
  display: inline-flex;
  align-items: center;
  /* flex-wrap: wrap; */
  /* align-content: flex-end; */
  box-sizing: border-box;
  font-family: PingFangSC-Semibold;
  /* width: 80px; */
  text-align: center;
  font-size: 16px;
  /* font-weight: bolder; */
  padding: 0 18px;
  cursor: pointer;

  line-height: 64px;
  height: 64px;
  color: rgba(51, 51, 51, 1);
  text-decoration: none;
  position: relative;
}

.nav-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item.padding12 {
  padding: 0 8px;
}

#nav .navbar {
  padding: 0;
  height: 64px;
  line-height: 64px;
}

#nav .navbar-brand {
  min-width: 180px;
  height: 64px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  margin-right: 20px;
}

#nav .navbar-brand img {
  margin: 0 auto;
  display: block;
}

#nav .img {
  height: 1.1rem;
  width: 1.1rem;
  vertical-align: baseline;
}

#nav .icon {
  font-size: 1.25rem;
}

/*ojSass nav-tabs */
.nav-item:hover {
  color: #3b5fdd;
}

/*ojSass 云课堂 */
.nav-item:hover a {
  color: #3b5fdd !important;
}

.router-link-exact-active {
  color: var(--color-cheng);
}

.el-icon-bell {
  font-size: 24px;
}

.headimages {
  height: 80px;
  line-height: 80px;
}

.headimages-item {
  display: inline-block;
  width: 50px;
  height: 50px;
}

.imageright {
  margin-right: -35px;
}

.imageleft {
  margin-left: -35px;
}

.imagecenter {
  z-index: 20;
}

.avater-name {
  width: max-content;
  display: inline-block;
  color: rgba(51, 51, 51, 1);
  margin-left: 10px;
  font-size: 14px;
}

.headimages img {
  width: 50px;
  height: 50px;
}

.avater-h {
  line-height: 64px;
}

.avater-h:focus-visible {
  outline: none !important;
}

.head-left {
  margin-right: -25px;
}

.head-center {
  z-index: 10;
}

.head-right {
  margin-left: -25px;
}

.headimages img:hover {
  width: 75px;
  height: 75px;
  z-index: 10;
}

.pu {
  cursor: pointer;
  color: var(--color-909399);

  line-height: 15px;
  margin-bottom: 20px;
}

.image {
  width: 75px;
  height: 75px;
}

.text-login {
  margin-bottom: 3px;
  margin-top: 3px;
}

.text-login h4 {
  text-align: center;
  font-size: 28px;
  font-weight: 650;
  color: var(--color-606266);
}

.text-body .col-6 {
  min-height: 400px;
}

.fix-form {
  padding: 0 50px;
}

.form-item-title {
  text-align: left;
  font-weight: bolder;
  margin: 20px 0;
  font-size: 16px;
}

.icon-text {
  display: inline-flex;
  align-items: center;
}

.fix-info-button {
  width: 50%;
  margin: 0 25%;
  height: 40px;
  font-size: 16px;
  border-radius: 4px !important;
  color: #fff;
}

.fix-info-button:hover {
  color: #fff;
  border-color: transparent !important;
}

.btn {
  height: 40px;
  font-size: 18px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
}

.btn-login {
  background: var(--color-43);
  border-radius: 2px !important;
  color: #fff;
}

.btn-login:hover {
  color: #fff;
  border-color: transparent !important;
}

.text-item {
  margin-bottom: 28px;
}

.p-1 {
  font-size: 14px;
}

.nav-item-name {
  line-height: 64px;
}

.headimage {
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0);
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  cursor: pointer;
}

.d-block {
  width: 100%;
}

/* 头像选择对话框样式 - 与ojSass保持一致 */
.avatar-dialog :deep(.el-dialog) {
  border-radius: 12px;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 16px;
  padding: 16px 0;
}

.avatar-item {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  padding: 8px;
  transition: all 0.2s ease;
}

.avatar-item:hover {
  background-color: var(--el-color-primary-light-9);
}

.avatar-option {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 0.2s;
}

.avatar-item:hover .avatar-option {
  border-color: var(--el-color-primary);
  transform: scale(1.1);
}

/* PC端原始样式显示控制 */
.pc-info-form {
  padding: 0 24px;
  display: block;
}

.mobile-info-form {
  display: none;
}

/* PC端现代化样式 - 更紧凑精致 */
.modern-section {
  background: #fff;
  border-radius: 8px;
  padding: 16px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--el-border-color-lighter);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--el-color-primary-light-8);
}

.section-icon {
  font-size: 16px;
  color: var(--el-color-primary);
  margin-right: 6px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.avatar-container {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 16px 0 20px 0;
  cursor: pointer;
}

.modern-avatar {
  border: 2px solid var(--el-color-primary-light-8);
  transition: all 0.3s ease;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.avatar-overlay {
  position: absolute;
  bottom: -6px;
  background: var(--el-color-primary);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.avatar-container:hover .modern-avatar {
  transform: scale(1.05);
  border-color: var(--el-color-primary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.avatar-container:hover .avatar-overlay {
  background: var(--el-color-primary-dark-2);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.modern-form-item {
  margin-bottom: 16px;
}

.modern-form-item :deep(.el-form-item__label) {
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 6px;
  font-size: 13px;
  text-align: left !important;
}

.modern-form-item :deep(.el-form-item__content) {
  width: 100% !important;
  margin-left: 0 !important;
}

.modern-input :deep(.el-input__wrapper) {
  border-radius: 6px;
  border: 1px solid var(--el-border-color-light);
  transition: all 0.3s ease;
  min-height: 42px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  background: #fafbfc;
}

.modern-input :deep(.el-input__wrapper:hover) {
  border-color: var(--el-color-primary-light-5);
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.modern-input :deep(.el-input__wrapper.is-focus) {
  border-color: var(--el-color-primary);
  background: #fff;
  box-shadow: 0 0 0 2px var(--el-color-primary-light-8),
    0 1px 6px rgba(0, 0, 0, 0.08);
}

.modern-input :deep(.el-input__inner) {
  font-size: 14px;
  line-height: 1.4;
  color: var(--el-text-color-primary);
}

.modern-input :deep(.el-input__prefix) {
  color: var(--el-color-primary);
  font-size: 15px;
}

.modern-action-btn {
  width: 50%;
  height: 40px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.3s ease;
  margin: 6px auto 0;
  border: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

/* 移动端样式切换 */
@media (max-width: 768px) {
  .pc-info-form {
    display: none !important;
  }

  .mobile-info-form {
    display: block !important;
  }

  /* 移动端极简样式 */
  .info-form {
    max-width: 100%;
  }

  .simple-card {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--el-border-color-lighter);
  }

  .simple-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }

  .simple-header el-icon {
    margin-right: 6px;
    font-size: 16px;
    color: var(--el-color-primary);
  }

  .simple-avatar {
    display: flex;
    align-items: center;
    padding: 8px;
    background: var(--el-color-primary-light-9);
    border-radius: 6px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .simple-avatar:hover {
    background: var(--el-color-primary-light-8);
  }

  .avatar-text {
    margin-left: 10px;
    font-size: 12px;
    color: var(--el-color-primary);
    font-weight: 500;
  }

  .simple-field {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .simple-field label {
    display: block;
    font-size: 12px;
    color: var(--el-text-color-regular);
    margin-bottom: 0;
    font-weight: 500;
    min-width: 50px;
    flex-shrink: 0;
  }

  .simple-field :deep(.el-input) {
    flex: 1;
  }

  .simple-field :deep(.el-input__wrapper) {
    border-radius: 6px;
    border: 1px solid var(--el-border-color);
    min-height: 32px;
    padding: 6px 10px;
  }

  .simple-button {
    width: 100%;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    margin: 14px auto 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .simple-button.primary {
    background: var(--el-color-primary);
    border-color: var(--el-color-primary);
    color: white;
  }

  .simple-button.secondary {
    background: var(--el-color-warning);
    border-color: var(--el-color-warning);
    color: white;
  }

  /* 移动端弹窗优化 */
  .responsive-dialog :deep(.el-dialog) {
    margin: 2vh auto !important;
    border-radius: 12px;
    max-height: 90vh;
    overflow: hidden;
  }

  .responsive-dialog :deep(.el-dialog__body) {
    padding: 6px !important;
    max-height: calc(90vh - 70px);
    overflow-y: auto;
    background: #f8f9fa;
  }

  .responsive-dialog :deep(.el-dialog__header) {
    padding: 12px 16px 6px !important;
    background: linear-gradient(
      135deg,
      var(--el-color-primary-light-9) 0%,
      #fff 100%
    );
    border-bottom: 1px solid var(--el-border-color-light);
  }

  /* 移动端头像选择优化 */
  .avatar-dialog :deep(.el-dialog) {
    width: 92% !important;
    margin: 8vh 4% !important;
    max-height: 75vh;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }

  .avatar-dialog :deep(.el-dialog__header) {
    padding: 16px 20px 8px !important;
    background: linear-gradient(
      135deg,
      var(--el-color-primary-light-9) 0%,
      #fff 100%
    );
    border-bottom: 1px solid var(--el-border-color-light);
    border-radius: 16px 16px 0 0;
  }

  .avatar-dialog :deep(.el-dialog__body) {
    padding: 12px 16px 16px;
    max-height: calc(75vh - 80px);
    overflow-y: auto;
    background: #fafbfc;
  }

  .avatar-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 8px 0;
  }

  .avatar-item {
    padding: 6px;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    transition: all 0.3s ease;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .avatar-item:hover,
  .avatar-item:active {
    transform: scale(0.95);
    background-color: transparent;
    box-shadow: none;
  }

  .avatar-option {
    width: 42px;
    height: 42px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
  }

  .avatar-item:hover .avatar-option,
  .avatar-item:active .avatar-option {
    border-color: var(--el-color-primary);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
  .simple-card {
    padding: 10px;
    margin-bottom: 6px;
  }

  .simple-header {
    margin-bottom: 10px;
    font-size: 13px;
  }

  .simple-avatar {
    padding: 6px;
  }

  .avatar-text {
    font-size: 11px;
  }

  .simple-field {
    margin-bottom: 10px;
    gap: 6px;
  }

  .simple-field label {
    font-size: 11px;
    margin-bottom: 0;
    min-width: 45px;
  }

  .simple-field :deep(.el-input__wrapper) {
    min-height: 30px;
    padding: 5px 8px;
  }

  .simple-button {
    font-size: 11px;
  }

  .responsive-dialog :deep(.el-dialog) {
    margin: 1vh auto !important;
    max-height: 95vh;
  }

  .responsive-dialog :deep(.el-dialog__body) {
    padding: 4px !important;
    max-height: calc(95vh - 60px);
  }

  .responsive-dialog :deep(.el-dialog__header) {
    padding: 10px 14px 4px !important;
  }

  .avatar-dialog :deep(.el-dialog) {
    width: 95% !important;
    margin: 6vh 2.5% !important;
    max-height: 80vh;
    border-radius: 16px;
  }

  .avatar-dialog :deep(.el-dialog__header) {
    padding: 14px 16px 6px !important;
    border-radius: 16px 16px 0 0;
  }

  .avatar-dialog :deep(.el-dialog__body) {
    padding: 8px 12px 12px;
    max-height: calc(80vh - 70px);
  }

  .avatar-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 6px 0;
  }

  .avatar-item {
    padding: 4px;
    border-radius: 8px;
    min-height: 48px;
    background: transparent;
    box-shadow: none;
  }

  .avatar-option {
    width: 40px;
    height: 40px;
    border: 2px solid transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    border-radius: 50%;
  }

  .avatar-item:active {
    transform: scale(0.9);
    background-color: transparent;
  }

  .avatar-item:active .avatar-option {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  }
}

/* 极小屏幕优化 */
@media (max-width: 380px) {
  .avatar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 4px 0;
  }

  .avatar-item {
    padding: 6px;
    border-radius: 6px;
    min-height: 54px;
    background: transparent;
    box-shadow: none;
  }

  .avatar-option {
    width: 38px;
    height: 38px;
    border: 2px solid transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    border-radius: 50%;
  }

  .avatar-item:active {
    transform: scale(0.88);
    background-color: transparent;
  }

  .avatar-item:active .avatar-option {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  }
}

/* 头像选择网格 - PC端样式 */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 16px;
  padding: 20px 0;
}

.avatar-item {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.avatar-item:hover {
  background-color: var(--el-color-primary-light-9);
}

.avatar-option {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 0.2s;
}

.avatar-item:hover .avatar-option {
  border-color: var(--el-color-primary);
  transform: scale(1.1);
}
</style>

<style>
.el-dialog-z {
  background-repeat: no-repeat !important;
  background-position: left !important;
  border: 0px;
  background-size: 464px 100% !important;
  background-color: rgba(255, 255, 255, 1) !important;
  min-height: 530px;
}

.el-dialog-z .icon {
  font-size: 1rem;
}

.el-dialog-z .el-dialog__header {
  padding: 0;
}

#navel-dialog .el-form-item__content {
  display: block;
}

.el-dialog-z-1 {
  height: auto;
}

.el-dialog-z-1 img {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}

#nav .el-badge {
  vertical-align: initial;
}

#nav .el-dropdown {
  color: #212529;
}

.el-tooltip__trigger:focus-visible {
  outline: unset !important;
}
</style>
